<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        简单版：
        <input type="textara" v-model="words" style="width: 20%; height: 100px;">
        翻译->
        <input type="textara" style="width: 20%; height: 100px;">
        <hr>
        
        完整版：<input type="textara" v-model="obj.words" style="width: 20%; height: 100px;">
         选择语言：
         <select  v-model="obj.lang">
            <option value="italy">意大利</option>
            <option value="english">英语</option>
            <option value="germa">德语</option>
         </select >
        <input type="textara" style="width: 20%; height: 100px;">


    </div>

    <script src="./vue.js"></script>
    <script src="./axios.min.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
                obj:{
                    words:'',
                    lang:'',
                },
                words:'',
                timer:''
            },
            methods: {

            },
            computed:{

            },
            watch: {
                words(newWords){
                    // 拿到定时器id，每次只要被监听的数据变化了，
                    // 就删除定时器不走请求了，重新等待一秒，达到停止变化1s后再请求
                    clearTimeout(this.timer)
                    this.timer = setTimeout(async ()=>{
                    const res = await axios({
                        url:'https://applet-base-api-t.itheima.net/api/translate',
                        params:{words:newWords}
                    })
                        console.log(res);
                    },1000)
                    
                },

                // 完整版，多个元素变化会影响同一个元素
                obj:{
                    deep:true,// obj的所有元素都会被监听
                    immediate:true, // 进来先立即执行，适用于有初始值的情况
                    handler () {
                        console.log('-->',this.obj);
                        clearTimeout(this.timer)
                        this.timer = setTimeout(async ()=>{
                        // const res = await axios({
                        //     url:'https://applet-base-api-t.itheima.net/api/translate',
                        //     params:{words:newWords}
                        // })
                        },1000)
                    },

                }

            }
        })


    </script>
    
</body>
</html>